<template>
   <div class="register-view">
       <template v-if="isComplete">
           <h1 class="title">注册成功</h1>
           <form method="post" onsubmit="return false">
               <p class="tip">请复制一下token进行登录</p>
               <div class="form-alias">
                   <label>
                       <strong>token</strong>
                       <input v-model="token" type="text" name="token" placeholder="token">
                   </label>
               </div>
               <div class="form-submit">
                   <router-link class="submit" :to="{ name: 'LoginView'}" tag="button">去登录</router-link>
               </div>
           </form>
       </template>
       <template v-else>
           <h1 class="title">欢迎加入豆瓣</h1>
           <form method="post" @submit.prevent="onSubmit()">
               <p v-if="error" class="tip error">{{error}}</p>
               <div class="form-alias">
                   <label>
                       <strong>邮箱</strong>
                       <input v-model="email" type="text" name="email" placeholder="邮箱">
                   </label>
               </div>
               <div class="form-pwd">
                  <label>
                       <strong>请输入密码</strong>
                        <template v-if="passType === 'password'">
                            <input v-model.trim="pass" type="password" name="pass" placeholder="密码">
                        </template>
                        <template v-if="passType === 'text'">
                            <input v-model.trim="pass" type="text" name="pass" placeholder="密码">
                        </template>
                        <span class="show-pwd" :class="{ show: isShow}" @click="showPwd()"></span>
                  </label>
               </div>
               <div class="form-name">
                   <label>
                       <strong>用户名</strong>
                       <input v-model.trim="name" type="text" name="name" placeholder="用户名">
                   </label>
               </div>
               <div class="form-submit">
                   <button class="submit" type="submit" :disabled="isDisabled" :class="{disabled: isDisabled}">
                       {{registerState}}
                   </button>
               </div>
           </form>
           <div class="footer">
               <div class="agreement">点击「注册」代表你已阅读并同意用户使用协议</div>
               <div class="btns"><a href="#">下载豆瓣App</a></div>
           </div>
       </template>
   </div>
</template>

<script>
   export default {
       name: 'register-view',
       data () {
       return {
           isComplete: false,
           isDisabled: false,        // 默认按钮可用
           isShow: 0,
           registerState: '立即注册',
           passType: 'password',
           error: '',
           email: '',
           pass: '',
           name: '',
           token: ''
       }
   },
   methods: {
       showPwd: function(){     // 修改显示密码的样式
           this.isShow = this.isShow ? 0 : 1;
           this.isShow ? this.passType = 'text' : this.passType = 'password';
       },
       beforeSubmit: function(){
           // 提交的时候 按钮设置禁用 并且修改按钮显示的文字内容
           this.isDisabled = true;
           this.registerState = '正在提交';
       },
       onSuccess: function(res){
           // 注册成功后 切换要显示的模板 以及设置token
           console.log('success')
           this.isComplete = true;
           this.token = res.body.token
       },
       onError: function(err){
           // 注册失败
           this.error = err.body.error;
           this.registerState = '立即注册';
           this.isDisabled = false
       },
       onSubmit: function(){
           this.beforeSubmit();
           // Action 通过 store.dispatch 方法触发 把表单填入的信息传递过去
           this.$store.dispatch({
               type: 'register',
               email: this.email,
               pass: this.pass,
               name: this.name
           }).then(res => {
               // 请求成功后
               this.onSuccess(res)
           }, err => {
               this.onError(err)
           })
       }
   },
//     beforeRouteEnter (to, from, next) {
//     next(vm => {
//       if (vm.$store.getters.currentUser.email) {
//         vm.$router.push({name: 'StatusView'})
//       } else {
//         next()
//       }
//     })
//   }
 }
</script>

<style lang="scss" scoped>
.register-view {
  h1 {
    margin: 10% 0 9%;
    font-size: 4rem;
    font-weight: 300;
    color: #42bd56;
    text-align: center;
  }
  form {
    padding: 2rem 1.5rem;
    strong {
      font-size: 1.5rem;
      color: #222;
      display: none;
      margin-bottom: 0.5rem;
    }
    input::placeholder {
      color: #ccc;
    }
    input[type="text"], input[type="password"] {
      display: inline-block;
      width: 100%;
      height: 4.4rem;
      padding: 0 0.8rem;
      box-sizing: border-box;
      font-size: 1.5rem;
      background: #fff;
      border: 0.1rem solid #ccc;
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem;
      outline: 0;
    }
    .form-pwd input, .form-name input {
      padding-right: 4rem;
      border-top: 0;
    }
    .form-pwd {
      position: relative;
      .show-pwd {
        position: absolute;
        right: 0.2rem;
        top: 0;
        display: block;
        height: 100%;
        width: 3.2rem;
        background-image: url();
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 2.2rem;
        z-index: 3;
      }
      .show-pwd.show {
        background-image: url();
      }
    }
    .submit {
      cursor: pointer;
      width: 100%;
      padding: 1.2rem 2.6rem;
      margin-top: 1rem;
      font-size: 1.7rem;
      text-align: center;
      color: #fff;
      background: #42bd56;
      border: 0.1rem solid #17AA52;
      border-radius: 0.3rem;
    }
    .disabled {
      cursor: not-allowed;
      background: #eee;
      border: none;
    }
    .tip {
      font-size: 1.4rem;
      color: #aaa;
    }
    .error {
      color: #ff0000;
    }
  }
  .footer {
    .agreement {
      font-size: 1.4rem;
      color: #aaa;
      text-align: center;
    }
    .btns {
      margin-top: 4rem;
      text-align: center;
      font-size: 1.5rem;

      a {
        color: #42bd56;
        margin-right: 1.5rem;
      }
    }
  }
}
</style>

